<template>
    <div class="cart-item" > <!-- @click="toDetail" -->
        <span class="icon-wrap" @click.stop="onClickSelect">
            <span class="icon" :class="[selected ? 'color-red' : 'color-font-4']">{{selected ? '&#xe69e;' : '&#xe637;'}}</span>
        </span>
        <img :src="cover" mode="aspectFill" class="cover" />
        <div class="content">
            <div class="name large-text">{{name}}</div>
            <div class="spec">{{spec}}</div>
            <div class="info">
                <div class="price color-red">
                    <span class="unit">￥</span>
                    <span class="number">{{priceText}}</span>
                </div>
                <Counter v-model="mutableCount"></Counter>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    currency,
} from '@/lib/utils';
import Counter from '@/features/product/counter.vue';
import {
    api,
} from '@/lib/api';
import { ROUTE_NAME } from '@/lib/constant';
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';

@Component({
    name: 'CartItem',
    components: {
        Counter,
    },
})
export default class CartItem extends Vue {
    @Prop({
        type: String,
    })
    public productId: any;

    /** 用于唯一标识的id */
    @Prop({})
    public selectValue: any;

    /** 封面 */
    @Prop({
        type: String,
    })
    public cover: any;

    /** 规格 */
    @Prop({
        type: String,
    })
    public spec: any;

    /** 名字 */
    @Prop({
        type: String,
    })
    public name: any;

    /** 数量 */
    @Prop({
        type: Number,
    })
    public count?: number;

    /** 价格 */
    @Prop({
        type: Number,
    })
    public price: any;

    /** 是否被选中 */
    @Prop({
        type: Boolean,
    })
    public selected: any;

    /** 可修改的count */
    public mutableCount: number | null = null;

    /** 价格文本 */
    public get priceText() {
        return currency(this.price);
    }

    /** 关于数量的修改 */
    @Watch('$props.count')
    public onPropsCountChange(val: any) {
        this.mutableCount = val;
    }

    @Watch('mutableCount')
    public onMutableCountChange(val: any) {
        this.$emit('count', {
            selectValue: this.selectValue,
            count: val,
        });
    }

    public onClickSelect() {
        this.$emit('select', this.selectValue);
    }

    public toDetail() {
        // api.navigateTo({
        //     url: '/pages/product_detail/main',
        //     query: {
        //         product_id: this.productId,
        //     },
        // });
        api.push({
            name: ROUTE_NAME.PRODUCT_DETAIL,
            query: {
                product_id: this.productId,
            },
        });
    }

    public mounted() {
        this.mutableCount = this.count;
    }
}
</script>
<style lang="less">

@import "../../lib/style/mixins.less";

.cart-item {
    display: flex;
    align-items: stretch;
    padding: 10px 10px 10px 15px;
    margin-bottom: 10px;
    background-color: @color-white;
    .icon-wrap {
        display: flex;
        align-items: center;
        padding-right: 8px;
        .icon {
            font-size: 20px;
            line-height: 32px;
        }
    }
    .cover {
        width: 80px;
        height: 80px;
        border-radius: 7px;
    }
    .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        padding-left: 10px;
        .info {
            display: flex;
            justify-content: space-between;
            .unit {
                .text-tiny();
            }
            .number {
                .text-large();
            }
        }
    }
    .spec {
        .text-small();
        color: @color-font-4;
    }
}

</style>
